<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>支付密码设置</title>
    <link rel="stylesheet" type="text/css" href="../../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/swiper.min.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/style.css" />
    <style>
        html,
        body {
            /*background: #fff;*/
            overflow: hidden;
        }

        .inner_header {
            font-size: 1.6rem;
            color: #000000;
            font-weight: 600;
            height: 6.9rem;
            margin: 0;
            padding: 2.4rem 0 0 0;
            box-sizing: border-box;
            background: none!important;
            box-shadow: 0rem 0rem 0.8rem 0rem rgba(0, 0, 0, 0.08);
            background: #fff!important;
        }

        .inner_header .right {
            font-size: 1.4rem;
            color: #6f6f6f;
        }

        .content {
            width: 100%;
            margin: 6.9rem 0 0 0;
            float: left;
            box-sizing: border-box;
        }

        .content_list {
            width: 100%;
            float: left;
            box-sizing: border-box;
            padding: 0 1.3rem 0 1.3rem;
        }

        .content_li {
            float: left;
            width: 100%;
            height: 8.3rem;
            box-sizing: border-box;
            color: #333333;
            font-size: 1.5rem;
            line-height: 8.3rem;
            text-align: center;
            margin-top: 4.65rem;
        }

        .content_list .center {
            float: left;
            width: 100%;
            box-sizing: border-box;
            color: #333333;
            font-size: 1.5rem;
        }

        .modular-ipt-password {
            width: 100%;
            position: relative;
            float: left;
        }

        .ipt-password {
            width: 93%;
            height: 4.65rem;
            border-radius: 0.5rem;
            display: flex;
            margin: 0rem auto 1.25rem auto;
            border: 0.05rem solid #ed6a20;
        }

        .ipt-password-i {
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 4.65rem;
            border-right: 0.05rem solid #888888;
        }

        .ipt-password .ipt-password-i:last-child {
            border-right: none;
        }

        .ipt-password-i .i-icon {
            width: 2rem;
            height: 2rem;
            margin: 1.325rem auto auto auto;
            background: #000;
            border-radius: 100%;
        }

        .keyboard {
            width: 100%;
            float: left;
            position: fixed;
            bottom: 0;
            background: #fff;
        }

        .keyboard-btn {
            width: 33.33%;
            float: left;
            height: 5.1rem;
            box-sizing: border-box;
            border-bottom: 0.05rem solid #8d8d8d;
            border-right: 0.05rem solid #8d8d8d;
        }

        .keyboard-btn-text {
            width: 100%;
            font-size: 2rem;
            line-height: 2rem;
            font-weight: 600;
            text-align: center;
            margin: 1rem 0 0 0;
            float: left;
        }

        .keyboard-btn-en {
            width: 100%;
            height: 0.85rem;
            line-height: 0.85rem;
            font-size: 0.85rem;
            text-align: center;
            float: left;
            margin: 0.6rem 0 0 0;
        }

        .text-zero {
            margin: 1.65rem 0 0 0;
        }

        .border-r-none {
            border-right: none;
        }

        .border-b-none {
            border-bottom: none;
        }

        .bgd2d5db {
            background: #d2d5db
        }

        .delete-num {
            width: 2.4rem;
            height: 1.7rem;
            margin: 1.95rem auto 0 auto;
        }

        .bgfff {
            background: #fff
        }

        .bgf2 {
            background: #f2f2f2
        }

        .pay-modular-arrow {
            width: 0.75rem;
            height: 1.45rem;
            position: absolute;
            top: 1.5rem;
            left: 1.3rem;
        }
        /* loading框 */

        .content_list .loading {
            width: 29.8%;
            height: 10.4rem;
            position: relative;
            top: -5rem;
            margin: 0 auto;
            border-radius: 0.7rem;
        }

        .content_list .loading img {
            width: 11.2rem;
            height: 10.4rem;
        }

        .btn {
            width: 93%;
            height: 4.7rem;
            background-color: #ed6a20;
            line-height: 4.7rem;
            text-align: center;
            color: #fff;
            margin: 0 auto;
            font-size: 1.6rem;
            margin-top: 22.15rem;
            border-radius: 1.98rem;
            z-index: 50
        }
    </style>
</head>

<body>
    <div id="app">
        <header class="aui-bar aui-bar-nav aui-bar-light inner_header">
            <a class="aui-pull-left aui-btn" onclick="goBack()">
                <img src="../../../image/back.png">
            </a>
            <div class="aui-title">设置支付密码</div>
            <a class="aui-pull-right share_nav_right right">
               取消
          </a>
        </header>
        <div class="content">
            <div class="content_list">
                <div class="content_li">
                    设置6位数字支付密码
                </div>
                <div class="modular-ipt-password" v-if="pay_modular==1?true:false" @click="clickCode">
                    <div class="ipt-password">
                        <div class="ipt-password-i" v-for="(item,key) in ipt_box">
                            <div class="i-icon" v-if="item.num?true:false"></div>
                        </div>
                    </div>
                </div>
                <div class="btn" v-if="complete" @click="showDefault('paysetting','./paysetting.html')">完成</div>
                <!-- loading框 -->
                <div class="loading" v-if="creatimg">
                    <img src="../../../image/capital/loading.png" alt="">
                </div>
            </div>
        </div>

        <!-- 键盘 -->
        <div class="keyboard" v-if="keyboard">
            <div class="keyboard-btn" v-for="(item,key) in pay_num" :class="item.additional_class" @click="check_ipt(key)">
                <div class="keyboard-btn-text" v-if="key<11?true:false" :class="key==10?'text-zero':''">
                    {{item.num}}
                </div>
                <div class="keyboard-btn-en" v-if="key<10?true:false">
                    {{item.en}}
                </div>
                <img src="../../../image/user/order_true/pay/delete.png" alt="" class="delete-num" v-if="key==11?true:false">
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../../script/api.js"></script>
<script type="text/javascript" src="../../../script/axios.min.js"></script>
<script type="text/javascript" src="../../../script/axios-config.js"></script>
<script type="text/javascript" src="../../../script/zepto.js"></script>
<script type="text/javascript" src="../../../script/vue.min.js"></script>
<script type="text/javascript" src="../../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../../script/utils.js"></script>
<script type="text/javascript" src="../../../script/common.js"></script>
<script type="text/javascript" src="../../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../../script/aui-pull-refresh.js"></script>
<script type="text/javascript">
    apiready = function() {
        var type = api.pageParam.type
        new Vue({
            el: "#app",
            data: {
                type: type,
                pay_modular: 1,
                keyboard: false, //隐藏键盘
                complete: false, //隐藏完成按钮
                creatimg: false, //loading框
                pay_num: [{
                    id: 1,
                    num: 1,
                    en: "",
                    additional_class: "",
                }, {
                    id: 2,
                    num: 2,
                    en: "A B C",
                    additional_class: "",
                }, {
                    id: 3,
                    num: 3,
                    en: "D E F",
                    additional_class: "border-r-none",
                }, {
                    id: 4,
                    num: 4,
                    en: "G H I",
                    additional_class: "",
                }, {
                    id: 5,
                    num: 5,
                    en: "J K L",
                    additional_class: "",
                }, {
                    id: 6,
                    num: 6,
                    en: "M N O",
                    additional_class: "border-r-none",
                }, {
                    id: 7,
                    num: 7,
                    en: "P Q R S",
                    additional_class: "",
                }, {
                    id: 8,
                    num: 8,
                    en: "T U V",
                    additional_class: "",
                }, {
                    id: 9,
                    num: 9,
                    en: "W X Y Z",
                    additional_class: "border-r-none",
                }, {
                    id: 10,
                    num: "",
                    en: "",
                    additional_class: "border-b-none bgd2d5db",
                }, {
                    id: 11,
                    num: 0,
                    en: "",
                    additional_class: "border-b-none",
                }, {
                    id: 12,
                    num: "-2",
                    en: "",
                    additional_class: "border-r-none border-b-none bgd2d5db",
                    url: "../../image/user/order_true/pay/delete.png"
                }, ],
                ipt_box: [{
                    num: ""
                }, {
                    num: ""
                }, {
                    num: ""
                }, {
                    num: ""
                }, {
                    num: ""
                }, {
                    num: ""
                }],
                ipt_num: "",
            },
            methods: {
                //输入按键
                check_ipt: function(key) {
                    var num = this.pay_num[key].num //获取按键
                    var ipt_num = this.ipt_num
                    var ipt_box = this.ipt_box
                        //   console.log(ipt_num.length)
                    if (num == -2) { //如果是删除键
                        if (ipt_num.length > 0) {
                            ipt_box[ipt_num.length - 1].num = ""
                            ipt_num = ipt_num.substring(0, ipt_num.length - 1)
                            this.ipt_num = ipt_num;
                            this.ipt_box = ipt_box
                        }
                        return false
                    }
                    if (ipt_num.length < 6) {
                        ipt_num += String(num)
                            //   console.log(ipt_num)
                        var length = ipt_num.length
                        ipt_box[length - 1].num = num
                        this.ipt_num = ipt_num;
                        this.ipt_box = ipt_box
                        if (ipt_num.length == 6) {
                            console.log("验证开始")
                            console.log(ipt_num)
                            this.ipt_num = ipt_num
                        }
                    }
                    if (ipt_num.length > 5) {
                        this.complete = true
                        this.keyboard = false
                    }

                },
                clickCode: function() {
                    this.keyboard = true
                },
                showDefault: function(name, url) {
                    this.creatimg = true
                    var token = $api.getStorage('token')
                    var data={
                        token:token,
                        type:this.type,
                        password:this.ipt_num,
                        repassword:this.ipt_num,
                        opassword:""
                    }
                    console.log(JSON.stringify(data))
                    Axios.post(window.Url.setpaypwd, data).then((res) => {
                        console.log(JSON.stringify(res))
                        if (res.status == 1) {
                            setTimeout(() => {
                                this.creatimg = false
                                api.openWin({
                                    name: name,
                                    url: url,
                                    pageParam: {
                                        data: ""
                                    }
                                });
                            }, 1000)
                        }
                    })

                }
            },
        })
    };


    function goBack() {
        api.closeWin({

        });
    }
</script>

</html>
